<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓鼠の官网 - 一枚程序猿的技术栖息地</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        :root {
            --primary-color: #FF9800;
            --secondary-color: #607D8B;
            --dark-color: #333;
            --light-color: #f5f5f5;
            --accent-color: #795548;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: var(--dark-color);
            background-color: #fff;
        }
        
        a {
            text-decoration: none;
            color: var(--primary-color);
            transition: all 0.3s ease;
        }
        
        a:hover {
            color: var(--accent-color);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: var(--primary-color);
            color: white;
            border-radius: 4px;
            font-weight: bold;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn:hover {
            background-color: var(--accent-color);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background-color: var(--secondary-color);
        }
        
        .section {
            padding: 60px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.2rem;
            color: var(--dark-color);
            position: relative;
        }
        
        .section-title:after {
            content: "";
            display: block;
            width: 80px;
            height: 4px;
            background-color: var(--primary-color);
            margin: 15px auto;
        }
        
        /* 头部导航栏 */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo-icon {
            font-size: 2rem;
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        .logo-text h1 {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }
        
        .logo-text p {
            font-size: 0.8rem;
            color: var(--secondary-color);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            color: var(--dark-color);
            font-weight: 500;
        }
        
        .nav-links a:hover {
            color: var(--primary-color);
        }
        
        .nav-links a.active {
            color: var(--primary-color);
            font-weight: bold;
        }
        
        /* Banner区域 */
        .banner {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            height: 500px;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
            margin-top: 60px;
        }
        
        .banner-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .banner h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            animation: fadeIn 1.5s ease-in-out;
        }
        
        .banner p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            animation: fadeIn 2s ease-in-out;
        }
        
        .banner-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
            animation: fadeIn 2.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 个人简介 */
        .about {
            background-color: var(--light-color);
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 40px;
        }
        
        .about-image {
            flex: 1;
        }
        
        .about-image img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
        }
        
        .tag {
            background-color: var(--secondary-color);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
        
        .contact-info {
            margin-top: 30px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .contact-icon {
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        /* 项目展示 */
        .projects {
            background-color: white;
        }
        
        .project-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .project-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .project-card:hover {
            transform: translateY(-10px);
        }
        
        .project-image {
            height: 200px;
            overflow: hidden;
        }
        
        .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .project-card:hover .project-image img {
            transform: scale(1.1);
        }
        
        .project-content {
            padding: 20px;
        }
        
        .project-content h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: var(--dark-color);
        }
        
        .project-content p {
            margin-bottom: 15px;
            color: var(--secondary-color);
        }
        
        .features {
            margin: 20px 0;
        }
        
        .feature {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .feature-icon {
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        .project-btns {
            display: flex;
            gap: 10px;
        }
        
        /* 技术成果 */
        .achievements {
            background-color: var(--light-color);
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            text-align: center;
        }
        
        .stat-item {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .stat-text {
            color: var(--secondary-color);
        }
        
        /* 用户互动 */
        .feedback {
            text-align: center;
        }
        
        .feedback p {
            max-width: 600px;
            margin: 0 auto 30px;
            color: var(--secondary-color);
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background-color: var(--light-color);
            border-radius: 50%;
            color: var(--dark-color);
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            background-color: var(--primary-color);
            color: white;
            transform: translateY(-5px);
        }
        
        /* 底部 */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 50px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: #ccc;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                padding: 15px 0;
            }
            
            .nav-links {
                margin-top: 20px;
            }
            
            .nav-links li {
                margin: 0 10px;
            }
            
            .banner {
                height: 400px;
            }
            
            .banner h2 {
                font-size: 2rem;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .banner-btns {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 80%;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- 头部导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-hamster"></i>
                    </div>
                    <div class="logo-text">
                        <h1>仓鼠の官网</h1>
                        <p>一枚程序猿的技术栖息地</p>
                    </div>
                </div>
                <ul class="nav-links">
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">关于我</a></li>
                    <li><a href="#">项目展示</a></li>
                    <li><a href="#">技术分享</a></li>
                    <li><a href="#">联系我</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Banner区域 -->
    <section class="banner">
        <div class="banner-content">
            <h2 id="banner-title">用代码搭建部落，用博客记录成长</h2>
            <p id="banner-subtitle">COC 工具开发者 | 全栈技术探索者</p>
            <div class="banner-btns">
                <a href="https://yzycoc.com/qq" class="btn">立即体验工具 →</a>
                <a href="https://yzycoc.com/blog" class="btn btn-secondary">查看最新博客</a>
            </div>
        </div>
    </section>

    <!-- 个人简介 -->
    <section class="section about">
        <div class="container">
            <h2 class="section-title">关于我</h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="仓鼠程序员">
                </div>
                <div class="about-text">
                    <h3>专注游戏工具开发与全栈技术的程序猿</h3>
                    <p>擅长 Java、云服务及自动化工具搭建，为《部落冲突》玩家打造高效管理工具，同时热衷于分享技术经验与开发心得。</p>
                    
                    <div class="tags">
                        <span class="tag">Java Spring Boot</span>
                        <span class="tag">MySQL</span>
                        <span class="tag">QQ/微信机器人</span>
                        <span class="tag">部落冲突COC</span>
                        <span class="tag">云服务器运维</span>
                        <span class="tag">前端开发</span>
                        <span class="tag">自动化工具</span>
                    </div>
                    
                    <div class="contact-info">
                        <div class="contact-item">
                            <i class="fas fa-envelope contact-icon"></i>
                            <span>邮箱：仓鼠@yzycoc.com</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-globe contact-icon"></i>
                            <span>GitHub：<a href="https://github.com/example" target="_blank">github.com/仓鼠</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目展示 -->
    <section class="section projects">
        <div class="container">
            <h2 class="section-title">项目展示</h2>
            <div class="project-cards">
                <!-- 部落仓鼠工具 -->
                <div class="project-card">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="部落仓鼠工具">
                    </div>
                    <div class="project-content">
                        <h3>部落仓鼠工具</h3>
                        <p>为《部落冲突》玩家打造的一站式管理平台，包含 QQ / 微信机器人、阵型库及国际服数据查询</p>
                        
                        <div class="features">
                            <div class="feature">
                                <i class="fas fa-robot feature-icon"></i>
                                <span>双端机器人：QQ / 微信全覆盖，支持部落数据查询、成员管理</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-chess-board feature-icon"></i>
                                <span>阵型库：TH3-TH17 全等级阵型，一键复制链接快速应用</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-chart-line feature-icon"></i>
                                <span>云控面板：实时监控联赛数据，首领管理效率提升 50%</span>
                            </div>
                        </div>
                        
                        <div class="project-btns">
                            <a href="https://yzycoc.com/qq" class="btn">立即使用工具</a>
                        </div>
                    </div>
                </div>
                
                <!-- 仓鼠的博客 -->
                <div class="project-card">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="仓鼠的博客">
                    </div>
                    <div class="project-content">
                        <h3>仓鼠的博客</h3>
                        <p>记录技术踩坑、工具开发实录与行业思考，含 Oracle 容灾、Maven 依赖优化等实战案例</p>
                        
                        <div class="features">
                            <div class="feature">
                                <i class="fas fa-file-alt feature-icon"></i>
                                <span><strong>最新文章：</strong>《解决 MySQL 5.7 安装时 mysqlx_port 报错问题》</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-file-alt feature-icon"></i>
                                <span><strong>最新文章：</strong>《前端字体加载优化：如何避免文字空白闪烁》</span>
                            </div>
                        </div>
                        
                        <div class="project-btns">
                            <a href="https://yzycoc.com/blog" class="btn">查看全部博客</a>
                        </div>
                    </div>
                </div>
                
                <!-- 仓鼠 API 服务 -->
                <div class="project-card">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="仓鼠 API 服务">
                    </div>
                    <div class="project-content">
                        <h3>仓鼠 API 服务</h3>
                        <p>技术储备中，计划开放 COC 数据接口、自动化运维工具等，点击了解进度</p>
                        
                        <div class="project-btns">
                            <button onclick="alert('当前服务暂未开放，订阅邮件通知可获取上线提醒')" class="btn">了解 API 动态</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术成果 -->
    <section class="section achievements">
        <div class="container">
            <h2 class="section-title">技术成果</h2>
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-number">10万+</div>
                    <div class="stat-text">累计服务COC玩家</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">5000+</div>
                    <div class="stat-text">阵型库日均访问量</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">50万+</div>
                    <div class="stat-text">CSDN博客阅读量</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">30+</div>
                    <div class="stat-text">技术社群转载教程</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 用户互动 -->
    <section class="section feedback">
        <div class="container">
            <h2 class="section-title">与我互动</h2>
            <p>对工具或博客有建议？直接告诉我！您的反馈将帮助我不断改进产品和服务。</p>
            <a href="#" class="btn">提交反馈</a>
            
            <div class="social-links">
                <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                <a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
                <a href="#" class="social-link"><i class="fab fa-qq"></i></a>
                <a href="#" class="social-link"><i class="fab fa-zhihu"></i></a>
                <a href="#" class="social-link"><i class="fab fa-csdn"></i></a>
            </div>
        </div>
    </section>

    <!-- 底部信息 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>关于仓鼠</h3>
                    <p>一枚热爱游戏开发与全栈技术的程序猿，致力于为《部落冲突》